<template>
	<view class="wrap">
		<image class="bg"
			src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/1.png" mode="">
		</image>

		<view class="inner">
			<view class="infoBox">
				<view class="innerInfo">
					<view class="top">
						<image class="photo"
							:src="vuex_userInfo.avatarUrl" 
							mode=""></image>
						<view class="right">
							<view class="name">
								{{vuex_userInfo.nickName}}
							</view>
							<view v-if="!vuex_isVip" class="status">
								未开通 (开通会员享受更多权益)
							</view>
							<view v-else class="status">
								有效期:{{vuex_vipExpireTime}}
							</view>
						</view>
					</view>
					<view class="bot">
						<view class="left">
							免广告下载高清原图
						</view>
						<view class="right">
							已支付会员未生效？
							<view class="btn">
								<image class="icon"
									src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/4.png"
									mode=""></image>
								点我查看
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="priceList">



				<view v-for="(item,index) in vip_configList" @click="cur=index" class="items"
					:class="[cur==index?'active':'']">
					<image v-if="item.vipId==2" class="icon"
						src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/5.png"
						mode=""></image>
					<image v-else class="icon"
						src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/6.png"
						mode=""></image>
					<view class="price">
						¥ {{item.originalPrice}}
					</view>
					<view class="save" :class="[item.vipId==2?'':'sel']">
						立省{{item.diffPrice}}元
						<view class="">
							<text class="unit">¥</text>
							<text class="money">{{item.price}}</text>
						</view>
					</view>
				</view>
				
			</view>

			<view class="record">
				<view class="tips">
					{{vip_configList[cur].tips}}
					<!-- 月卡尊享下载额度：900张/每月，30张/日 -->
				</view>
				<view class="name">
					他们刚刚购买了会员
				</view>
				<view class="scroll_box" style="padding: 0 35rpx;">
					<swiper style="height: 280px;" class="swiper" circular="true" vertical="true"
						display-multiple-items="8" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in buyList" :key="index">

							<view class="recordList">
								<view class="item">
									<image class="photo" :src="item.avatar" mode=""></image>
									<view class="name">
										{{item.nickname}}
									</view>
									<view class="desc">
										{{item.time}}购买了会员卡
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="vips">
			<view class="name">
				<text>VIP特权</text>
				一键解锁 l 全站无限高速下载
			</view>
			<view class="item">
				<image class="photo"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/7.png"
					mode=""></image>
				<view class="info">
					<view class="top">
						免看广告
					</view>
					<view class="bot">
						畅快下载去除广告
					</view>
				</view>
			</view>
			<view class="item">
				<image class="photo"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/8.png"
					mode=""></image>
				<view class="info">
					<view class="top">
						尊贵身份
					</view>
					<view class="bot">
						专属会员身份标识
					</view>
				</view>
			</view>
			<view class="item">
				<image class="photo"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/9.png"
					mode=""></image>
				<view class="info">
					<view class="top">
						下载额度
					</view>
					<view class="bot">
						突破素材下载上限
					</view>
				</view>
			</view>


			<view class="item">
				<image class="photo"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/10.png"
					mode=""></image>
				<view class="info">
					<view class="top">
						下载额度
					</view>
					<view class="bot">
						超全分类海量素材
					</view>
				</view>
			</view>
			<view class="item">
				<image class="photo"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/11.png"
					mode=""></image>
				<view class="info">
					<view class="top">
						极速下载
					</view>
					<view class="bot">
						更快！但不至于快！
					</view>
				</view>
			</view>
			<view class="item">
				<image class="photo"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/12.png"
					mode=""></image>
				<view class="info">
					<view class="top">
						敬请期待
					</view>
					<view class="bot">
						更多功能开发中...
					</view>
				</view>
			</view>
		</view>

		<view class="notice">
			<view class="name">
				开通会员须知
			</view>
			<view class="desc">
				1.未满8周岁的未成年人请勿下单购买，8周岁至18周岁的未成年人请在监护人知情且明确同意的情况下方可下单；
			</view>
			<view class="desc">
				2.会员开通后立即生效，会员生效时长为购买时间加购买时长，比如您在2023年11月30日12点30分购买了月卡会员（一个月），即在2023年12月30日12点30分过期；
			</view>
			<view class="desc">
				3.会员开通后立即生效，会员生效时长为购买时间加购买时长，比如您在2023年11月30日12点30分购买了月卡会员（一个月），即在2023年12月30日12点30分过期；
			</view>
			<view class="desc">
				4.支付成功后可能会有1-2分钟的会员生效时间，如果仍未成功，可联系客服进行咨询。
			</view>
		</view>



		<view class="buy">
			<view class="cheap">
				<text>秒杀 l 全年最低价</text>
			</view>
			<view class="top">
				<view class="left">
					<view class="unit">
						合计 ¥
					</view>
					<view class="price">
						
						{{vip_configList[cur].price}}
						<!-- {{vipPrice}} -->
					</view>
				</view>
				
				<u-button type="success" @click="payment()" class="btns" :ripple="true" ripple-bg-color="#909399">立即支付</u-button>
				<!-- <view class="btns" @click="payment()">
					立即支付
				</view> -->
			</view>
		</view>

		<!-- 支付成功 -->

		<u-popup :mask-custom-style="bg" border-radius="29" v-model="sucMaskhow" mode="center">
			<view>
				<sucMask @cancelFn="cancelFn" />
			</view>
			<!-- <image @click="sucMaskhow=false" class="close"
				src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/25.png" mode=""></image> -->
		</u-popup>



	</view>
</template>
<script>
	import sucMask from "./sucMask.vue"
	export default {
		components: {
			sucMask
		},
		data() {
			return {
				cur: 0,
				vip_configList: [],
				bg: {
					background: 'rgba(0, 0, 0, 0.7)'
				},
				sucMaskhow: false,
				// 月卡/周卡类型
				cardType: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,

				mask2: false,

				sample: false,
				// 会员购买列表
				buyList: [],


				// 会员购买成功提示
				buyTips: '',
				// 会员列表
				vipList: [],
				// 会员ID
				vipId: 0,
				// 会员价格
				vipPrice: 0,
				// 会员描述
				vipDescribe: '',
				// 防止抖动
				shake: true,
				// 任务ID
				taskId: 0,
				// 模版ID
				movId: 0,
				// 创作者ID
				creatorId: 0,
				// 账号ID
				accountId: 0,
				// 资源ID
				resourcesId: 0,
				// 图片数组
				imgList: [],
				// 图集ID
				atlasId: 0,
				// 资源ID
				resourcesId: 0,
				// 会员到期时间
				vipExpireTime: '',
				// 是否是会员
				isVip: false,
				// 置顶会员信息
				topInfo: {
					vipName: '',
					price: 0,
					describe: '',
				},
				// 用户信息授权结果
				authRt: false,
			};
		},
		onLoad(options) {

			// 获取会员购买列表
			this.getBuyList();
			// 获取价目表
			this.getvip_config()

		},

		methods: {
			// 取消成功弹框
			cancelFn() {
				this.sucMaskhow = false
			},
			getvip_config() {
				this.$u.api.vip.vip_config().then(res => {
					console.log(res, 888888);
					this.vip_configList = res.data
				})
			},
			// 获取会员购买列表
			getBuyList() {
				this.$u.api.vip.getBuyList({appletId:this.vuex_appletId}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}
					this.buyList = res.data
				})
			},
			// 支付
			async payment() {
				// if (!this.shake) {
				// 	return
				// }
				// this.shake = false;
				uni.showLoading({
					title: '发起支付中...'
				})
				// await this.getUserInfo().then(res => {
				// 	this.authRt = true
				// }).catch(error => {
				// 	this.$u.toast('请授权后购买会员');
				// 	this.authRt = false
				// })
				// if (!this.authRt) {
				// 	return false;
				// }
				// let userInfo = uni.getStorageSync('userInfo');
				this.$u.api.dy.createOrder({
					appletId: this.vuex_appletId,
					vipId: this.vip_configList[this.cur].vipId,
					nickname: this.vuex_userInfo.nickName,
					avatarUrl: this.vuex_userInfo.avatarUrl,
					assessId:0,
					collectionId:0,
					callbackId:0,
					taskId: 0,
					movId: 0,
					creatorId: 0,
					accountId: 0,
					atlasId:0,
					resourcesId: 0,
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return false;
					}
					uni.hideLoading()

					// 调起支付
					this.pay(res.data.order_id, res.data.order_token)
				})
			},

			// 调起支付
			pay(order_id, order_token) {
				const that = this;
				// 支付
				tt.pay({
					orderInfo: {
						order_id: order_id,
						order_token: order_token
					},
					service: 5,
					success(res) {
						that.shake = true;
						// 支付成功
						if (res.code == 0) {
							// 校验订单状态
							that.checkOrderStatus(order_id)
						}
					},
					fail(res) {
						that.shake = true;
						console.log('zfng', res)
					}
				});
			},
			// 校验订单状态
			checkOrderStatus(order_id) {
				
				this.$u.api.dy.checkOrderStatus({
					dyOrderNo: order_id
				}).then(res => {
					if (res.code != 200) {
						this.$utils.msg(res.msg);
						return false;
					}
					this.vipExpireTime = res.data.vipExpireTime
					this.isVip = res.data.isVip
					this.buyTips = res.data.buyTips
					this.mask2 = true
				})
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					if (!uni.getStorageSync('userInfo')) {
						// 获取用户信息
						uni.getUserProfile({
							provider: '',
							success(res) {
								uni.setStorageSync('userInfo', res.userInfo);
								resolve()
							},
							fail() {
								uni.hideLoading()
								that.shake = true;
								reject()
							}
						});
					} else {
						resolve()
					}

				})
			}
		}
	};
</script>
<style scoped lang="scss">
	/deep/ .u-mode-center-box {
		background: none !important;
		// overflow: initial !important;
	}

	.close {
		margin: 0 auto;
		width: 65rpx;
		height: 65rpx;
		display: block;
		z-index: 999;
	}

	.wrap {
		padding-bottom: 180rpx;
	}

	.bg {
		width: 100%;
		height: 54rpx;
		display: block;
	}

	.inner {
		margin: 0 24rpx;

		.infoBox {
			height: 338rpx;
			width: 100%;
			margin-bottom: 30rpx;
			background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/buyingMembership/2.png") no-repeat;
			background-size: cover;

			.innerInfo {
				padding: 115rpx 16rpx 21rpx 32rpx;


				.top {
					display: flex;
					align-items: center;

					.photo {
						width: 79rpx;
						height: 79rpx;
						border-radius: 50%;
						margin-right: 17rpx;
					}

					.right {
						.name {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 33rpx;
						}

						.status {
							border-radius: 31rpx;
							margin-top: 3rpx;
							background: rgba(255, 255, 255, 0.15);
							padding: 4rpx 14rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 300;
							color: rgba(255, 255, 255, 0.8);
							line-height: 23rpx;
						}
					}
				}

				.bot {
					padding-top: 75rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 35rpx;
					}

					.right {

						display: flex;
						align-items: center;
						justify-content: flex-end;
						flex: 1;
						font-size: 19rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #8CC950;
						line-height: 22rpx;

						.btn {
							.icon {
								width: 19rpx;
								height: 16rpx;
							}

							width: 122rpx;
							height: 36rpx;
							background: rgba(140, 201, 80, 0.17);
							border-radius: 80rpx 80rpx 80rpx 80rpx;
							margin-left:14rpx;
							display: flex;
							align-items: center;
							font-size: 20rpx;
							font-family: PingFang SC,
							PingFang SC;
							font-weight: 400;
							color: #8CC950;
							line-height: 20rpx;
							transform: scale(0.9);

						}
					}
				}
			}
		}
	}

	.priceList {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.items {
			position: relative;
			flex: 1;
			border: 4rpx solid transparent;

			&:first-child {
				margin-right: 16rpx;
				&.active {
					border: 4rpx solid #455FE8;
				}

			}
			&:last-child {
				margin-right: 16rpx;
				&.active {
					border: 4rpx solid #f2733d;
				}
			
			}

			

			&.active1 {
				border: 4rpx solid #f2733d;
			}

			height: 213rpx;
			background: rgba(45, 48, 85, 0.35);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;

			.icon {
				position: absolute;
				left: 0;
				top: -2px;
				width: 185rpx;
				height: 55rpx;
			}

			.price {
				padding: 81rpx 0 0 29rpx;
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #737B9A;
				line-height: 47rpx;
			}

			.save {
				padding: 18rpx 24rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8CC950;
				line-height: 35rpx;

				&.sel {
					color: #FFBD5A !important;
				}

				.unit {

					font-size: 39rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					// color: #B6FF6D;
					line-height: 46rpx;
					padding-right: 6rpx;


				}

				>view {
					position: absolute;
					right: 24rpx;
					bottom: 16rpx;
				}

				.money {
// font-size: 90rpx;
// line-height: 105rpx;
					font-size: 70rpx;
					line-height: 75rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					// color: #B6FF6D;
					

					// &.sec {
					// 	color: #FFBD5A;
					// }
				}

			}

		}
	}

	.record {
		background: rgba(45, 48, 85, 0.35);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 38rpx;

		.tips {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 33rpx;
			text-shadow: 0px 2px 0px rgba(28, 29, 53, 0.42);
			padding: 28rpx 35rpx;
		}

		.name {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #8CC950;
			line-height: 30rpx;
			padding-bottom: 15rpx;
			padding-left: 35rpx;
		}

		.recordList {
			margin: 0 18rpx;

			.item {
				margin-bottom: 16rpx;
				font-size: 22rpx;
				font-family: HYQiHei-45S, HYQiHei;
				font-weight: normal;

				display: flex;
				align-items: center;

				.photo {
					width: 47rpx;
					height: 47rpx;
					border-radius: 50%;
				}

				.name {
					min-width: 140rpx;
					padding: 0 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.53);
					line-height: 28rpx;
				}

				.desc {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.53);
					line-height: 28rpx;
				}
			}
		}

	}



	.vips {
		padding-left: 35rpx;
		width: 702rpx;
		height: 461rpx;
		background: rgba(45, 48, 85, 0.35);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin: 30rpx auto;
		display: flex;
		flex-wrap: wrap;

		.name {
			display: flex;
			align-items: flex-end;
			padding: 30rpx 35rpx 30rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 300;
			color: #849EFF;
			line-height: 28rpx;

			text {
				margin-right: 10rpx;
				font-size: 38rpx;
				font-family: Tomorrow, Tomorrow;
				font-weight: 400;
				color: #BF97FF;
				line-height: 45rpx;
				letter-spacing: 1px;
			}
		}

		.item {
			margin-bottom: 48rpx;
			width: 50%;
			display: flex;

			image {
				width: 72rpx;
				height: 72rpx;
				margin-right: 11rpx;
			}

			.info {
				flex: 1;

				.top {
					margin: 8rpx 0;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 30rpx;
					text-shadow: 0px 2px 0px rgba(28, 29, 53, 0.42);
				}

				.bot {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					color: #71727e;
					line-height: 26rpx;
				}
			}
		}
	}

	.notice {
		padding-bottom: 20rpx;
		width: 702rpx;
		margin: 0 auto;
		background: rgba(45, 48, 85, 0.35);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.name {
			padding: 30rpx 35rpx;
			font-size: 30rpx;
			font-family: Tomorrow, Tomorrow;
			font-weight: 400;
			color: #4ADEE7;
			line-height: 35rpx;
		}

		.desc {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.75);
			line-height: 28rpx;
			padding: 0 35rpx 20rpx;
		}

	}



	.buy {
		height: 169rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: #141627;

		.cheap {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 0;
			top: 13rpx;
			left: 20rpx;
			background: #ff5d28;
			padding: 4rpx 9rpx;
			border-radius: 5px 5px 5px 0;
			// width: 179rpx;
			// height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;

		}

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 43rpx;
			margin: 0 32rpx;

			.left {
				display: flex;
				align-items: flex-start;

				.unit {
					margin: 15rpx 10rpx 0 0;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 35rpx;
				}

				.price {
					font-size: 64rpx;
					font-family: HYQiHei, HYQiHei;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 75rpx;

				}
			}

			.btns {
				background: #16AC51;
				width: 263rpx;
				height: 80rpx;
				border-radius: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
					
				/deep/ .u-btn--success{
					background: #16AC51;
					width: 263rpx;
					height: 80rpx;
					border-radius: 70rpx;
				}
			}
		}
	}
</style>
